<script setup>
import { userReg } from "@/api/user";
import { message } from "ant-design-vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const formState = ref({
  username: "",
  password: "",
  repassword: "",
  email: "",
  playerName: "",
});
const captcha = ref("");
const captchaUrl = ref("");
const formRef = ref();
const rules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  repassword: [{ required: true, message: "请重复输入密码", trigger: "blur" }],
  email: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
    { type: "email", message: "邮箱格式错误", trigger: "blur" },
  ],
  playerName: [{ required: true, message: "请输入游戏名", trigger: "blur" }],
};

const onSubmit = async () => {
  if (captcha.value == "") {
    message.error("请输入验证码");
    return;
  }
  if (formState.value.repassword != formState.value.password) {
    message.error("两次密码不一致");
    return;
  }
  try {
    await formRef.value.validate();
  } catch {
    return;
  }
  let { data } = await userReg(formState.value, captcha.value);
  if (data.code != 200) {
    captcha.value = "";
    initCaptcha();
    message.error(data.message);
    return;
  }
  message.success(data.message);
  router.push({ name: "Login" });
};
const initCaptcha = () => {
  captchaUrl.value = "";
  setTimeout(() => {
    captchaUrl.value = "/api/captcha";
  }, 10);
};

onMounted(async () => {
  initCaptcha();
});
</script>

<template>
  <div class="content">
    <a-row type="flex" justify="center" style="margin-top: 100px">
      <a-col :md="6" :xs="21" :sm="21">
        <a-card title="服务器列表 - 注册">
          <a-alert message="欢迎注册服务器列表" type="info" closable /> <br />
          <a-form :model="formState" :rules="rules" ref="formRef">
            <a-form-item name="username">
              <a-input v-model:value="formState.username" placeholder="用户名" />
            </a-form-item>
            <a-form-item name="email">
              <a-input v-model:value="formState.email" placeholder="邮箱" />
            </a-form-item>
            <a-form-item name="playerName">
              <a-input v-model:value="formState.playerName" placeholder="游戏名" />
            </a-form-item>
            <a-form-item name="password">
              <a-input v-model:value="formState.password" type="password" placeholder="密码" />
            </a-form-item>
            <a-form-item name="repassword">
              <a-input v-model:value="formState.repassword" type="password" placeholder="重复密码" />
            </a-form-item>
            <a-form-item>
              <a-input v-model:value="captcha" placeholder="验证码" />
              <br />
              <br />
              <img @click="initCaptcha()" :src="captchaUrl" />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="onSubmit">注册</a-button>
              <a-button style="margin-left: 10px" @click="formRef.resetFields()">重置</a-button>
              <a-button style="margin-left: 10px" @click="router.push({ name: 'Login' })">返回登录</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.content {
  position: fixed;
  width: 100%;
  background-image: url("../assets/sign_bg.png");
  background-repeat: no-repeat;
  background-color: #b8e5f8;
  background-size: cover;
  height: 100vh;
}
</style>
